<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table border="1">
      <caption>
        title
      </caption>
      <thead>
        <tr>
          <td>name</td>
          <td>age</td>
          <td>gender</td>
        </tr>
      </thead>
      <tbody style="background: yellowgreen">
        <tr>
          <td>jack</td>
          <td>20</td>
          <td>boy</td>
        </tr>
        <tr>
          <td>lili</td>
          <td>20</td>
          <td>boy</td>
        </tr>
        <tr>
          <td>lucy</td>
          <td>20</td>
          <td>boy</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      </tfoot>
    </table>
    <script>
      const table = document.body.children[0];

      // 第一个tbody中的所有的tr标签
      console.log(table.tBodies[0].rows);
      console.log(table.tFoot.rows);
      console.log(table.tHead.rows);
      // 基于行对象获取单元格
      console.log(table.tHead.rows[0].cells);
      console.log(table.tFoot.rows[0].cells);
      // 获取行的全局索引
      console.log(table.tBodies[0].rows[2].rowIndex);
      // 获取行的局部索引
      console.log(table.tBodies[0].rows[2].sectionRowIndex);

      // 获取单元格的索引
      console.log(table.tFoot.rows[0].cells[2].cellIndex);
    </script>
  </body>
</html>
